<template>
  <div class="table-container">
    <ex-list :context="ctx">
      <template #querys>
        <el-form-item label="用户名">
          <el-input v-model="data.query.username" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="data.query.name" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="data.query.phone" />
        </el-form-item>
      </template>
      <template #btns>
        <el-button type="primary" @click="ctx.add()">
          <vab-icon icon="add-line" />
          新增
        </el-button>
      </template>

      <template #columns>
        <!-- <el-table-column type="selection" width="50" /> -->
        <el-table-column label="id" prop="id" sortable width="80" />
        <el-table-column label="用户名" prop="username" show-overflow-tooltip />
        <el-table-column label="姓名" prop="name" show-overflow-tooltip />
        <el-table-column label="角色" prop="name" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag v-for="item in row.roles" :key="item.id" :type="'success'">
              {{ item.name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="phone" show-overflow-tooltip />
        <el-table-column label="电子邮箱" prop="email" show-overflow-tooltip />
        <el-table-column
          label="创建时间"
          prop="created_at"
          show-overflow-tooltip
        />

        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          show-overflow-tooltip
          width="200"
        >
          <template #default="{ row }">
            <el-button link type="primary" @click="ctx.edit(row)">
              编辑
            </el-button>
            <el-popconfirm
              cancel-button-text="取消"
              confirm-button-text="确定"
              title="确认删除?"
              @confirm="ctx.del(row)"
            >
              <template #reference>
                <el-button link type="primary">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </ex-list>
  </div>
</template>
<script setup>
  import useList from '@/hooks/useList'
  import ExList from '@/components/ExList.vue'

  const ctx = useList({ res: 'user' })
  const { data } = ctx
</script>
